<style lang="less" scoped src="./dictionary.less"></style>
<script src="./dictionary.js"></script>

<template>
    <div>
        <Row v-if="isAdmin">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModal"
                :title="(formData.id ? '修改': '新增') + '字典'"
                @on-ok="viewModal = false"
                @on-cancel="viewModal = false"
                width="40%"
                :mask-closable="false">
            <Form :model="formData" :label-width="75">
                <FormItem label="字典名称">
                    <Input v-model="formData.name" clearable></Input>
                </FormItem>
                <FormItem label="状态">
                    <Select v-model="formData.status" filterable clearable>
                        <Option :value=1>在用</Option>
                        <Option :value=2>停用</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述">
                    <Input v-model="formData.description" type="textarea" :rows="4" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="排序">
                    <Input v-model="formData.orders" clearable></Input>
                </FormItem>
                <FormItem label="字典代码" v-if="isAdmin">
                    <Input v-model="formData.code" clearable></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="viewModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>